import { Graph } from '@antv/x6';
// 拓扑配置
export const nodeRect: NodeObj = {
  service: {
    width: 80,
    height: 128
  },
  gateway: {
    width: 128,
    height: 128
  }
};

export const config = {
  service: {
    fill: '#fff',
    titleFill: 'rgb(87,106,149)',
    titleColor: '#fff',
    stroke: 'rgb(95,149,255)',
    opacity: 1,
    fillOpacity: 0.5,
    titleFillOpacity: 1,
    imageLink: './svg/computer-normal.svg',
    strokeWidth: 1,
    color: '#000'
  }
};

interface NodeObj {
  [key: string]: any
}

export const nodes: NodeObj = {
  service: {
    width: nodeRect.service.width,
    height: nodeRect.service.height,
    zIndex: 2,
    markup: [
      {
        tagName: 'rect',
        attrs: { class: 'card-body' }
      },
      {
        tagName: 'text',
        attrs: { class: 'name-title' }
      },
      {
        tagName: 'image',
        attrs: { class: 'image-bg' }
      },
      {
        tagName: 'image',
        attrs: { class: 'image-anchor' }
      }
    ],
    attrs: {
      '.card-body': {
        refWidth: '100%',
        refHeight: '100%',
        fill: 'red',
        fillOpacity: 0.5,
        stroke: 'red'
      },
      '.image-bg': {
        x: 2,
        y: 2,
        width: nodeRect.service.width,
        height: nodeRect.service.height,
        xlinkHref: './svg/wind2.svg'
      },
      '.name-title': {
        refX: '50%',
        refY: '105%',
        fontSize: 12,
        width: nodeRect.service.width,
        height: 32,
        textAnchor: 'middle'
      },
      '.image-anchor': {
        x: (nodeRect.service.width - 32) / 2,
        y: -(32 + 15),
        width: 32,
        height: 32,
        xlinkHref: './svg/anchor.svg'
      }
    }
  },
  gateway: {
    width: nodeRect.gateway.width,
    height: nodeRect.gateway.height,
    zIndex: 2,
    markup: [
      {
        tagName: 'rect',
        attrs: { class: 'card-body' }
      },
      {
        tagName: 'text',
        attrs: { class: 'name-title' }
      },
      {
        tagName: 'image',
        attrs: { class: 'image-bg' }
      }
    ],
    attrs: {
      '.card-body': {
        refWidth: '100%',
        refHeight: '100%',
        fill: '#000',
        fillOpacity: 0.07
      },
      '.image-bg': {
        x: 2,
        y: 2,
        width: nodeRect.gateway.width,
        height: nodeRect.gateway.height,
        xlinkHref: './svg/gateway-normal.svg'
      },
      '.name-title': {
        refX: '50%',
        refY: '105%',
        fontSize: 12,
        width: nodeRect.gateway.width,
        height: 32,
        textAnchor: 'middle'
      }
    }
  }
};

export const registryNode = () => {
  for (const key in nodes) {
    Graph.registerNode(key, nodes[key], true);
  }
};

// 创建图元
export const createNode = (sgraph: Graph, type: string, config: any) => {
  const {
    x, y, id, title
  } = config; // 位置加id
  const nodeShape = {
    x,
    y,
    id,
    width: nodeRect[type].width,
    height: nodeRect[type].height,
    shape: type,
    attrs: {
      '.name-title': {
        fill: '#333',
        text: title
      }
    },
    data: {}
  };
  return graph.createNode(JSON.parse(JSON.stringify(nodeShape)));
};

export default {};
